<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
        
        <script type="text/javascript">
            var chart;
            
            var chartData = [
            // scatter points            
            {ax:1, ay:0.5, bx:1, by:2.2},
            {ax:2, ay:1.3, bx:2, by:4.9},
            {ax:3, ay:2.3, bx:3, by:5.1},
            {ax:4, ay:2.8, bx:4, by:5.3},
            {ax:5, ay:3.5, bx:5, by:6.1},
            {ax:6, ay:5.1, bx:6, by:8.3},
            {ax:7, ay:6.7, bx:7, by:10.5},
            {ax:8, ay:8.0, bx:8, by:12.3},
            {ax:9, ay:8.9, bx:9, by:14.5},
            {ax:10, ay:9.7, bx:10, by:15.0},
            {ax:11, ay:10.4, bx:11, by:18.8},
            {ax:12, ay:11.7, bx:12, by:19.0},
            // trend graphs
            {agx:12, agy:11, bgx:12, bgy:19},
            {agx:1, agy:1, bgx:1, bgy:2}];
            
            window.onload = function()
            {
                chart = new AmCharts.AmXYChart();        
                chart.pathToImages = "../../amcharts/javascript/images/";
                chart.dataProvider = chartData;
                chart.startDuration = 1.5;
                chart.marginLeft = 30;
                
                var xAxis = new AmCharts.ValueAxis();
                xAxis.position = "left";
                xAxis.autoGridCount = true;
                chart.addValueAxis(xAxis);
                
                var yAxis = new AmCharts.ValueAxis();
                yAxis.position = "bottom";
                yAxis.autoGridCount = true;
                chart.addValueAxis(yAxis);
								
								
                var graph1 = new AmCharts.AmGraph();
                graph1.lineColor = "#FF6600";
                graph1.balloonText = "x:[[x]] y:[[y]]";
                graph1.xField = "ax";
                graph1.yField = "ay";
                graph1.lineAlpha = 0;
                graph1.bullet = "triangleUp";
                chart.addGraph(graph1);
                
                var graph2 = new AmCharts.AmGraph();
                graph2.lineColor = "#FCD202";
                graph2.balloonText = "x:[[x]] y:[[y]]";
                graph2.xField = "bx";
                graph2.yField = "by";
                graph2.lineAlpha = 0;
                graph2.bullet = "triangleDown";
                chart.addGraph(graph2);			
                
                var graph3 = new AmCharts.AmGraph();
                graph3.lineColor = "#FF6600";
                graph3.xField = "agx";
                graph3.yField = "agy";
                chart.addGraph(graph3);
                
                var graph4 = new AmCharts.AmGraph();
                graph4.lineColor = "#FCD202";
                graph4.xField = "bgx";
                graph4.yField = "bgy";
                chart.addGraph(graph4);																		
                
                var chartCursor = new AmCharts.ChartCursor();
                chart.addChartCursor(chartCursor);
                
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chartScrollbar.hideResizeGrips = false;
                chart.addChartScrollbar(chartScrollbar);
                                                
                chart.write("chartdiv");
            }				    
        
        </script>
    
    </head>
    
    <body>
        <div id="chartdiv" style="width: 600px; height: 400px;"></div>
    </body>
</html>
